<template>
  <div>
    <div id="content-pdf" style="width: 210mm">
      <div class="pages home" style="width: 210mm; height: 297mm">
        <div class="title"> <span>Gut</span><span style="margin-left: 20px">Microbiota</span></div>
        <div class="title-sub">
          <span>Testing</span><span style="margin-left: 10px">Report</span></div
        >
        <div class="home-category">
          <div class="left">
            <div class="top">肠道菌群</div>
            <div class="bottom">检测报告</div>
          </div>
          <div class="right">AI解读版 </div>
        </div>
        <div class="home-content">
          <div>客户姓名：{{ jsonData['1健康总体评估']['客户姓名'] }}</div>
          <div>检测编码：{{ jsonData['1健康总体评估']['检测编码'] }}</div>
          <div>采样时间：{{ jsonData['1健康总体评估']['采样时间'] }}</div>
          <div>送检时间：{{ jsonData['1健康总体评估']['送检时间'] }}</div>
        </div>
        <div class="home-bottom">
          <div class="left">
            <img src="./1.png" alt="" />
          </div>
          <div class="right">
            <div class="top">肠道健康精筛检测</div>
            <div class="bottom"> 基因检测 </div>
          </div>
        </div>
      </div>

      <div class="pages">
        <h1>1 健康总体评估</h1>
        <div class="title-son"> 健康评分 </div>
        <div class="title-content">
          <div
            style="font-size: 22px; font-weight: 600; color: orange; text-align: center"
            class="left-right-border"
            >健康总分：{{ jsonData['1健康总体评估']['健康评分']['健康总分'] }}（{{
              jsonData['1健康总体评估']['健康评分']['健康状况']
            }}）</div
          >
          <div
            style="
              display: flex;
              font-size: 18px;
              font-weight: 600;
              color: rgb(255 113 45);
              justify-content: space-around;
            "
            class="left-right-border"
          >
            <div>菌群健康: {{ jsonData['1健康总体评估']['健康评分']['菌群健康'] }}</div>
            <div>慢病控制: {{ jsonData['1健康总体评估']['健康评分']['慢病控制'] }}</div>
          </div>
          <div
            style="display: flex; font-size: 18px; font-weight: 600; justify-content: space-around"
            class="left-right-border"
          >
            <div style="color: rgb(255 113 45)"
              >营养均衡: {{ jsonData['1健康总体评估']['健康评分']['营养均衡'] }}
            </div>
            <div style="color: orange"
              >免疫炎症: {{ jsonData['1健康总体评估']['健康评分']['免疫炎症'] }}</div
            >
          </div>
          <div
            style="
              font-weight: 500;
              color: rgb(63 158 255);
              text-align: center;
              border-bottom: 2px solid rgb(0 91 52);
            "
            class="left-right-border"
          >
            肠 型: {{ jsonData['1健康总体评估']['肠型'] }}
          </div>
        </div>
        <div class="content-detail">
          您此次的健康评分为
          <span style="font-size: 24px; font-weight: 600; color: orange">
            {{ jsonData['1健康总体评估']['健康评分']['健康总分'] }}
          </span>
          分， 评价为:
          <span style="font-size: 24px; font-weight: 600; color: orange">{{
            jsonData['1健康总体评估']['健康评分']['健康状况']
          }}</span>
          。 根据您的年龄，健康总分建议在 <span style="color: rgb(63 158 255)">80</span>分以上。
        </div>
        <div class="content-detail">
          其中需要您特别注意的是:<span class="bold-label"
            >菌群健康：<span style="color: red">
              {{ jsonData['1健康总体评估']['健康评分']['菌群健康'] }}
            </span> </span
          ><span class="bold-label">
            营养均衡：<span style="color: orange">
              {{ jsonData['1健康总体评估']['健康评分']['营养均衡'] }}</span
            > </span
          ><span class="bold-label">
            慢病控制：<span style="color: red">
              {{ jsonData['1健康总体评估']['健康评分']['慢病控制'] }}</span
            > </span
          ><span class="bold-label">
            免疫炎症：<span style="color: red">
              {{ jsonData['1健康总体评估']['健康评分']['免疫炎症'] }}</span
            >
          </span>
          这4项得分较低，可能会对您的身体造成以下影响：
        </div>
        <ul class="content-detail-sub">
          <li class="pdf-group">
            <span class="bold-label"> 菌群健康</span
            >:肠道菌群严重不健康会导致菌群多样性显著降低，有益菌如双歧杆菌和乳酸杆菌大量减少，有害菌过度增殖。这会引起消化功能障碍，表现为腹胀、腹泻或便秘；增加肠道通透性（肠漏症），使毒素和未消化食物进入血液；显著提高患炎症性肠病、肠易激综合征和结直肠癌的风险；并影响神经递质合成，可能导致焦虑、抑郁等心理健康问题。</li
          >
          <li class="pdf-group">
            <span class="bold-label"> 营养均衡</span>
            :营养均衡严重不健康与菌群失调形成恶性循环。菌群失衡会削弱维生素B族、维生素K和短链脂肪酸的合成能力，导致营养吸收障碍和能量代谢异常。同时，不均衡的饮食（如高脂、高糖、低纤维）会进一步破坏菌群平衡，引发营养不良、微量元素缺乏、代谢综合征和肥胖，显著增加心血管疾病
            和2型糖尿病风险。</li
          >
          <li class="pdf-group">
            <span class="bold-label"> 慢病控制</span>
            :慢病控制严重不健康表明慢性疾病管理已失控。菌群失调会加剧胰岛素抵抗，恶化血糖控制；促进动脉粥样硬化，增加高血压和心脏病风险；影响胆汁酸代谢，加重肝脏负担；并与自身免疫性疾病、神经系统疾病（如阿尔茨海默病）的发展密切相关。整体慢性病进展加速，治疗反应下降，并发症风险显著升高。</li
          >
          <li class="pdf-group">
            <span class="bold-label"> 免疫炎症</span>
            :免疫炎症处于亚健康状态表明免疫系统已开始失衡。菌群失调会破坏肠道免疫耐受，导致免疫细胞过度激活，促炎细胞因子（如TNF-α、IL6）水平升高。这会引发慢性低度炎症，增加自身免疫性疾病（如类风湿关节炎）、过敏性疾病风险，并使身体更容易感染。虽未达疾病状态，但已是炎症相关疾病的重要预警信号。</li
          >
        </ul>
        <div class="pdf-split-page" style="height: 50px"></div>
        <div class="title-son"> 菌群得分总览 </div>
        <div class="title-content">
          <div style="display: flex; width: 100%" class="left-right-border">
            <div class="bold-label w50" style="padding-left: 50px">
              肠道菌群健康:
              <span style="color: orange; text-align: right">
                {{ jsonData['1健康总体评估']['菌群得分总览']['肠道菌群健康'] }}</span
              ></div
            >
            <div class="bold-label w50">
              肠道黏膜屏障:
              <span style="color: orange">
                {{ jsonData['1健康总体评估']['菌群得分总览']['肠道黏膜屏障'] }}</span
              ></div
            ></div
          >

          <div style="display: flex; width: 100%" class="left-right-border">
            <div class="bold-label w50" style="padding-left: 50px">
              肠道菌群平衡:
              <span style="color: orange">
                {{ jsonData['1健康总体评估']['菌群得分总览']['肠道菌群平衡'] }}</span
              ></div
            >
            <div class="bold-label w50">
              菌群多样性:
              <span style="color: green">{{
                jsonData['1健康总体评估']['菌群得分总览']['菌群多样性']
              }}</span></div
            ></div
          >
          <div style="display: flex; width: 100%" class="left-right-border">
            <div class="bold-label w50" style="padding-left: 50px">
              肠道核心微生物:
              <span style="color: orange">
                {{ jsonData['1健康总体评估']['菌群得分总览']['肠道核心微生物'] }}</span
              ></div
            >
            <div class="bold-label w50">
              肠道有益菌:
              <span style="color: green">{{
                jsonData['1健康总体评估']['菌群得分总览']['肠道有益菌']
              }}</span></div
            >
          </div>
          <div style="display: flex; width: 100%" class="left-right-border">
            <div class="bold-label w50" style="padding-left: 50px">
              肠道有害菌:
              <span style="color: red">
                {{ jsonData['1健康总体评估']['菌群得分总览']['肠道有害菌'] }}</span
              ></div
            >
            <div class="bold-label w50">
              肠菌表型:
              <span style="color: red">{{
                jsonData['1健康总体评估']['菌群得分总览']['肠菌表型']
              }}</span></div
            >
          </div>
          <div style="display: flex; width: 100%" class="left-right-border">
            <div class="bold-label w50" style="padding-left: 50px">
              肠道免疫力:
              <span style="color: green">
                {{ jsonData['1健康总体评估']['菌群得分总览']['肠道免疫力'] }}</span
              ></div
            >
            <div class="bold-label w50">
              营养代谢:
              <span style="color: green">{{
                jsonData['1健康总体评估']['菌群得分总览']['营养代谢']
              }}</span></div
            >
          </div>
          <div style="display: flex; width: 100%" class="left-right-border">
            <div class="bold-label w50" style="padding-left: 50px">
              抗生素抗性:
              <span style="color: red">
                {{ jsonData['1健康总体评估']['菌群得分总览']['抗生素抗性'] }}</span
              ></div
            >
            <div class="bold-label w50">
              毒素清除:
              <span style="color: red">{{
                jsonData['1健康总体评估']['菌群得分总览']['毒素清除']
              }}</span></div
            ></div
          >
          <div
            style="display: flex; width: 100%; border-bottom: 2px solid rgb(0 91 52)"
            class="left-right-border"
          >
            <div class="bold-label w50" style="padding-left: 50px">
              胃肠道感染:
              <span style="color: green">
                {{ jsonData['1健康总体评估']['菌群得分总览']['胃肠道感染'] }}</span
              ></div
            >
            <div class="bold-label w50">
              疾病风险评估:
              <span style="color: orange">{{
                jsonData['1健康总体评估']['菌群得分总览']['疾病风险评估']
              }}</span></div
            >
          </div>
        </div>
        <h2>1. 总体评估</h2>
        <ul class="content-detail-sub">
          <li
            class="pdf-group"
            v-for="(item, index) in jsonData['1健康总体评估']['总体评估']"
            :key="index"
          >
            {{ item }}
          </li>
        </ul>
        <h2>2. 主要问题分析</h2>
        <ul class="content-detail-sub">
          <li
            class="pdf-group"
            v-for="(item, index) in jsonData['1健康总体评估']['主要问题分析']"
            :key="index"
          >
            {{ item }}
          </li>
        </ul>

        <h2>3. 积极方面</h2>
        <ul class="content-detail-sub">
          <li
            class="pdf-group"
            v-for="(item, index) in jsonData['1健康总体评估']['积极方面']"
            :key="index"
          >
            {{ item }}
          </li>
        </ul>
        <h2>4. 建议措施 </h2>
        <ul class="content-detail-sub">
          <li
            class="pdf-group"
            v-for="(item, index) in jsonData['1健康总体评估']['建议措施']"
            :key="index"
          >
            {{ item }}
          </li>
        </ul>
        <div class="content-detail">
          提示：肠道不是一个消化器官，而已经成为一个“24”小时不间断把转化营养，生产毒素和炎症的工厂输送到全身。数据的指标在接下来的分析报告中会解读和
          身体的关联性，请认真查阅。</div
        >
        <h1>2 肠道黏膜屏障</h1>
        <div style="display: flex; width: 100%; background-color: rgb(0 91 52)">
          <el-row
            :gutter="20"
            style="width: 100%; padding: 8px 0; font-size: 20px; font-weight: 600; color: #fff"
          >
            <el-col :span="6" style="text-align: center"> 检测项目 </el-col>
            <el-col :span="6" style="text-align: center"> 检测结果 </el-col>
            <el-col :span="6" style="text-align: center"> 参考范围 </el-col>
            <el-col :span="6" style="text-align: center"> 综合评估 </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col :span="18" :offset="0">
            <el-row
              :gutter="20"
              style="width: 100%; padding: 8px 0; border-bottom: 1px solid #ccc"
              v-for="(item, index) in jsonData['2肠道黏膜屏障']['检测项目列表']"
              :key="index"
            >
              <el-col :span="8" style="text-align: center"> {{ item.检测项目 }} </el-col>
              <el-col :span="8" style="text-align: center">
                {{ item.检查结果 }}{{ item.备注标识 }}
              </el-col>
              <el-col :span="8" style="text-align: center"> {{ item.参考范围 }} </el-col>
            </el-row>
          </el-col>
          <el-col :span="6" :offset="0">
            <div
              style="
                display: flex;
                width: 100%;
                height: 100%;
                justify-content: center;
                font-size: 40px;
                color: rgb(0 91 52);
                align-items: center;
              "
            >
              {{ jsonData['2肠道黏膜屏障'].综合评估 }}
            </div>
          </el-col>
        </el-row>
        <div class="content-detail">
          您的肠道黏膜屏障综合评分为<span style="font-size: 24px; font-weight: 600; color: orange">
            {{ jsonData['2肠道黏膜屏障'].综合评估 }}</span
          >分，BE比值为：
          <span style="font-size: 20px; font-weight: 600; color: orange">
            {{
              jsonData['2肠道黏膜屏障']['检测项目列表'].find((item) => item.检测项目 == 'BE 比值')
                .检查结果
            }}{{
              jsonData['2肠道黏膜屏障']['检测项目列表'].find((item) => item.检测项目 == 'BE 比值')
                .备注标识
            }}</span
          >， 评价为:
          <span style="font-size: 24px; font-weight: 600; color: orangered">{{
            jsonData['2肠道黏膜屏障'].评价
          }}</span>
        </div>

        <h2>1. 肠道黏膜屏障功能评估</h2>
        <ul class="content-detail-sub">
          <li
            class="pdf-group"
            v-for="(item, index) in jsonData['2肠道黏膜屏障'].肠道黏膜屏障功能评估"
            :key="index"
          >
            {{ item }}
          </li>
        </ul>
        <h2>2. 对肠道屏障的具体影响</h2>
        <ul class="content-detail-sub">
          <li
            class="pdf-group"
            v-for="(item, index) in jsonData['2肠道黏膜屏障'].对肠道屏障的具体影响"
            :key="index"
          >
            {{ item }}
          </li></ul
        ><h2>3. 对全身健康的影响</h2>
        <ul class="content-detail-sub">
          <li
            class="pdf-group"
            v-for="(item, index) in jsonData['2肠道黏膜屏障'].对全身健康的影响"
            :key="index"
          >
            {{ item }}
          </li></ul
        >
        <h2>4. 临床意义</h2>
        <ul class="content-detail-sub">
          <li
            class="pdf-group"
            v-for="(item, index) in jsonData['2肠道黏膜屏障'].临床意义"
            :key="index"
          >
            {{ item }}
          </li></ul
        >

        <h1>3 肠道免疫力评估</h1>
        <div style="display: flex; width: 100%; background-color: rgb(0 91 52)">
          <el-row
            :gutter="20"
            style="width: 100%; padding: 8px 0; font-size: 20px; font-weight: 600; color: #fff"
          >
            <el-col :span="6" style="text-align: center"> 检测项目 </el-col>
            <el-col :span="6" style="text-align: center"> 评估值 </el-col>
            <el-col :span="6" style="text-align: center"> 参考范围 </el-col>
            <el-col :span="6" style="text-align: center"> 肠道菌群状态 </el-col>
          </el-row>
        </div>
        <el-row
          :gutter="20"
          style="width: 100%; padding: 8px 0; border-bottom: 1px solid #ccc"
          v-for="(item, index) in jsonData['3肠道免疫力评估'].检测项目列表"
          :key="index"
        >
          <el-col :span="6" style="text-align: center"> {{ item.检测项目 }} </el-col>
          <el-col :span="6" style="text-align: center"> {{ item.评估值 }} </el-col>
          <el-col :span="6" style="text-align: center"> {{ item.参考范围 }} </el-col>
          <el-col :span="6" style="text-align: center"> {{ item.肠道菌群状态 }} </el-col>
        </el-row>

        <h2>1.肠道抗炎能力分析</h2>
        <ul class="content-detail-sub">
          <li class="pdf-group">
            <span class="bold-label"> 关联性：</span
            >{{ jsonData['3肠道免疫力评估']['肠道抗炎能力分析'].关联性 }}
          </li>
          <li class="pdf-group">
            <span class="bold-label">干预方式：</span
            >{{ jsonData['3肠道免疫力评估']['肠道抗炎能力分析'].关联性 }}</li
          >
        </ul>
        <h2>2. 肠道免疫力分析</h2>
        <ul class="content-detail-sub">
          <li class="pdf-group">
            <span class="bold-label"> 关联性：</span
            >{{ jsonData['3肠道免疫力评估']['肠道免疫力分析'].关联性 }}
          </li>
          <li class="pdf-group">
            <span class="bold-label">干预方式：</span
            >{{ jsonData['3肠道免疫力评估']['肠道免疫力分析'].关联性 }}</li
          >
        </ul>
        <h2>3. 肠道膳食纤维需求分析</h2>
        <ul class="content-detail-sub">
          <li class="pdf-group">
            <span class="bold-label"> 关联性：</span
            >{{ jsonData['3肠道免疫力评估']['肠道膳食纤维需求分析'].关联性 }}
          </li>
          <li class="pdf-group">
            <span class="bold-label"> 干预方式：</span
            >{{ jsonData['3肠道免疫力评估']['肠道膳食纤维需求分析'].干预方式 }}
          </li>
        </ul>

        <h1>4 肠道菌群多样性</h1>
        <div style="display: flex; width: 100%; background-color: rgb(0 91 52)">
          <el-row
            :gutter="20"
            style="width: 100%; padding: 8px 0; font-size: 20px; font-weight: 600; color: #fff"
          >
            <el-col :span="6" style="text-align: center"> 检测项目 </el-col>
            <el-col :span="6" style="text-align: center"> 评估值 </el-col>
            <el-col :span="6" style="text-align: center"> 参考范围 </el-col>
            <el-col :span="6" style="text-align: center"> 多样性情况 </el-col>
          </el-row>
        </div>
        <el-row
          :gutter="20"
          style="width: 100%; padding: 8px 0; border-bottom: 1px solid #ccc"
          v-for="(item, index) in jsonData['4肠道菌群多样性']['检测项目列表']"
          :key="index"
        >
          <el-col :span="6" style="text-align: center"> {{ item.检测项目 }} </el-col>
          <el-col :span="6" style="text-align: center"> {{ item.评估值 }} </el-col>
          <el-col :span="6" style="text-align: center"> {{ item.参考范围 }}</el-col>
          <el-col :span="6" style="text-align: center"> {{ item.多样性情况 }} </el-col>
        </el-row>

        <h2>1. 肠道菌群多样性分析</h2>
        <ul class="content-detail-sub">
          <li
            class="pdf-group"
            v-for="(item, index) in jsonData['4肠道菌群多样性']['肠道菌群多样性分析']"
            :key="index"
            >{{ item }}</li
          >
        </ul>
        <h2>2. 肠道菌群种类分析</h2>
        <ul class="content-detail-sub">
          <li
            class="pdf-group"
            v-for="(item, index) in jsonData['4肠道菌群多样性']['肠道菌群种类分析']"
            :key="index"
            >{{ item }}</li
          >
        </ul>
        <h2>3. 总体健康影响评估</h2>
        <ul class="content-detail-sub">
          <li
            class="pdf-group"
            v-for="(item, index) in jsonData['4肠道菌群多样性']['总体健康影响评估']"
            :key="index"
            >{{ item }}</li
          >
        </ul>
        <div class="pdf-split-page" style="height: 50px"></div>
        <h1>5 肠道菌群表型评估</h1>
        <div style="display: flex; width: 100%; background-color: rgb(0 91 52)">
          <el-row
            :gutter="20"
            style="width: 100%; padding: 8px 0; font-size: 20px; font-weight: 600; color: #fff"
          >
            <el-col :span="6" style="text-align: center"> 检测项目 </el-col>
            <el-col :span="6" style="text-align: center"> 评估值 </el-col>
            <el-col :span="6" style="text-align: center"> 参考范围 </el-col>
            <el-col :span="6" style="text-align: center"> 结果评价 </el-col>
          </el-row>
        </div>
        <div
          style="display: flex; padding: 15px 0; border-bottom: 1px solid #ccc"
          v-for="(item, index) in jsonData['5肠道菌群表型评估']['检测项目列表']"
          :key="index"
        >
          <div class="w25" style="text-align: center">{{ item.检测项目 }}</div>
          <div class="w25" style="text-align: center">{{ item.评估值 }}</div>
          <div class="w25" style="text-align: center">{{ item.参考范围 }}</div>
          <div class="w25" style="text-align: center">{{ item.结果评价 }}</div>
        </div>
      </div>
    </div>
    <!-- <div id="footerPdf" style="width: 210mm; height: 50px"></div>
    <div id="headerPdf" style="width: 210mm; height: 50px"></div> -->
  </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['update'])
import jsonData from './yunduan.json'

const props = defineProps({
  // props\
  exportData: {
    type: Boolean,
    value: false
  }
})

watch(
  () => props.exportData,
  (newValue) => {
    proxy
      .$exportPDF({
        id: 'content-pdf',

        fileName: '测试报告'
      })
      .then(() => {
        emit('update', { exportLoading: false })
      })
  }
)
</script>

<style scoped lang="scss">
.pages {
  padding: 80px;
  font-size: 17px;
  background: white;
  box-sizing: border-box;

  h1 {
    padding: 20px 0;
    font-size: 26px;
  }
}

.home {
  position: relative;

  /* 背景渐变：从顶部浅绿到底部深绿的垂直渐变 */
  background: linear-gradient(
    to bottom,
    rgb(120 200 180 / 90%),
    /* 顶部浅绿（带轻微透明） */ rgb(30 120 100 / 100%) /* 底部深绿 */
  );
}

.title {
  font-size: 70px;
  font-weight: 600;
  line-height: 50px;
  color: rgb(255 255 255);
}

.title-sub {
  font-size: 55px;
  color: #f5f5f9;
}

.home-category {
  display: flex;
  margin-top: 50px;

  .left {
    font-size: 45px;

    .top {
      color: #f5f5f9;
    }

    .bottom {
      font-weight: 550;
      color: rgb(255 255 255);
    }
  }

  .right {
    display: flex;
    margin-left: 100px;
    font-size: 60px;
    font-weight: 550;
    color: rgb(255 255 255);
    align-items: center;
  }
}

.home-content {
  margin-top: 50px;
  margin-left: 10px;
  font-size: 22px;
  font-weight: 500;
  color: rgb(255 255 255);
}

.home-bottom {
  position: absolute;
  bottom: 50px;
  display: flex;
  width: 170mm;
  color: rgb(255 255 255);
  justify-content: space-between;

  .left {
    width: 100px;

    img {
      width: 100%;
    }
  }

  .right {
    font-size: 24px;
    text-align: right;
  }
}

.title-son {
  padding: 8px 0;
  margin-top: 10px;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  background: rgb(0 91 52);
}

.title-content {
  .green-content-flex {
    display: flex;
    margin: 20px 0;
    font-size: 18px;
    font-weight: 600;
    justify-content: space-around;
  }
}

.content-detail {
  margin-top: 15px;
}

.bold-label {
  font-weight: 600;
}

.bold-label-sub {
  display: flex;
  font-weight: 600;
}

.bold-label-sub-div {
  width: 5px;
  height: 5px;
  border: 10px solid #000;
  border-radius: 50%;
}

.content-detail-sub {
  padding: 20px 0 0 20px;
  font-size: 16px;
  line-height: 1.6;
  list-style: none; /* 清除默认黑点 */
  li {
    position: relative;
    padding-left: 20px; /* 给黑点留空间 */
    margin-bottom: 10px;
  }

  li::before {
    /* 自定义黑点样式 */
    position: absolute;
    top: 8px; /* 垂直居中（根据行高调整） */
    left: 0;
    width: 6px;
    height: 6px;
    background-color: #000; /* 黑点颜色 */
    border-radius: 50%; /* 圆形 */
    content: '';
  }
}

h2 {
  margin: 10px 0;
}

.left-right-border {
  padding: 15px 0;
  border-right: 2px solid rgb(0 91 52);
  border-left: 2px solid rgb(0 91 52);
}
</style>
